﻿<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <title>表格选择 - tableselect</title>
        <link rel="shortcut icon" href="../static/image/favicon.png">
        <link rel="stylesheet" type="text/css" href="../static/style/common.css">
        <style type="text/css">
            .mod-panel .table-container {
                margin-bottom:25px;
            }
            .mod-panel .table-container table {
                width:100%;
                margin-bottom: 20px;
                table-layout:fixed;
                border-collapse: collapse;
                border-spacing: 0;
            }
            .mod-panel .table-container table th,.mod-panel .table-container table td {
                border: 1px solid #cee1ee;
                word-break: break-all;
                word-wrap: break-word;
                padding:4px 10px;
                line-height: 20px;
                text-align: center;
                font-weight: normal;
            }
            .mod-panel .table-container table td.selecting{
                background-color: #fdf1dd;
            }
            .mod-panel .table-container table td.selected{
                background-color: #fc9000;
            }
            .mod-panel .table-container table td.disabled{
                background-color: #f5f5f5;
            }
            .mod-panel .table-container table th, .mod-panel .table-container table td.th{
                background-color: #e3eef8;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="/public/script/jquery.min.js"></script>
        <script type="text/javascript" src="/code/jquery.tableselect.js?v=20230418"></script>
    </head>
    <body>
<div class="wrapper">
            <header>
                <div class="mod-head">
                    <div class="inner">
                        <div class="bd">
                            <div class="logo">
                                <a href="/"><img src="../static/image/public/logo.png" width="180" height="64" alt="路人甲"></a>
                            </div>
                            <nav>
                            </nav>
                            <div class="operation">
                                <a class="btn" href="https://passer-by.com" target="_blank">个人网站</a>
                                <a class="btn" href="https://github.com/mumuy/widget/" rel="nofollow" target="_blank" title="Github">
                                    <svg aria-hidden="true" class="octicon" title="GitHub " version="1.1" viewBox="0 0 16 16" width="24" height="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z"></path></svg>
                                    <span>Github</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <div class="container">
                <div class="inner">
                    <section class="mod-panel">
                        <div class="hd">
                            <h3 class="title">表格选择 - tableselect</h3>
                        </div>
                        <div class="bd">
                            <div class="table-container">
                                <table id="demo1">
                                    <thead>
                                        <tr>
                                            <th width="15%">&nbsp;</th>
                                            <th>房间1</th>
                                            <th>房间2</th>
                                            <th>房间3</th>
                                            <th>房间4</th>
                                            <th>房间5</th>
                                            <th>房间6</th>
                                            <th>房间7</th>
                                            <th>房间8</th>
                                            <th>房间9</th>
                                            <th>房间10</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="th disabled"><span>8:00-9:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>9:00-10:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td colspan="3"></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>10:00-11:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>11:00-12:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td rowspan="2"></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>12:00-13:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="disabled"></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>13:00-14:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td><span>内容测试</span></td>
                                            <td></td>
                                            <td rowspan="3" colspan="2"></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>14:00-15:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>15:00-16:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>16:00-17:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>17:00-18:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p>
                                    <button id="mergeCells">合并单元格</button>
                                    <button id="splitCells">拆分单元格</button>
                                </p>
                            </div>
                            <div class="code">
<code><pre>$("table#demo1").tableselect(function(api){
    $('#mergeCells').on('click',function(){
        var range = api.getSelectedRange();
        if(range){
            api.mergeCells(range,function($item){
                $item.removeClass('selected');
            });
        }
    });
    $('#splitCells').on('click',function(){
        var range = api.getSelectedRange();
        if(range){
            api.splitCells(range,function($item){
                $item.removeClass('selected');
            });
        }
    });
});</pre></code>
                            </div>
                            <script type="text/javascript">
                                $("table#demo1").tableselect(function(api){
                                    $('#mergeCells').on('click',function(){
                                        var range = api.getSelectedRange();
                                        if(range){
                                            api.mergeCells(range,function($item){
                                                $item.removeClass('selected');
                                            });
                                        }
                                    });
                                    $('#splitCells').on('click',function(){
                                        var range = api.getSelectedRange();
                                        if(range){
                                            api.splitCells(range,function($item){
                                                $item.removeClass('selected');
                                            });
                                        }
                                    });
                                });
                            </script>
                            <div class="table-container">
                                <table id="demo2">
                                    <thead>
                                        <tr>
                                            <th width="15%">&nbsp;</th>
                                            <th colspan="2">场地1</th>
                                            <th colspan="2">场地2</th>
                                            <th colspan="2">场地3</th>
                                            <th colspan="2">场地4</th>
                                            <th colspan="2">场地5</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="th disabled"><span>8:00-9:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>9:00-10:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>10:00-11:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>11:00-12:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>12:00-13:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="disabled"></td>
                                            <td class="disabled"></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>13:00-14:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="disabled"></td>
                                            <td class="disabled"></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>14:00-15:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>15:00-16:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>16:00-17:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="th disabled"><span>17:00-18:00</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <p>限制选择范围，每2列可选</p>
                            <div class="code">
<code><pre>$("table#demo2").tableselect({
    'onSelecting':function(range){
        var limit_count = 2;
        var index = Math.ceil(range['from'][0]/limit_count);
        if(range['from'][0]<=range['to'][0]){
            range['to'][0] = Math.min(range['to'][0],index*limit_count);
        }else{
            range['to'][0] = Math.max(range['to'][0],index*limit_count-1);
        }
        return range;
    }
});</pre></code>
                            </div>
                            <script type="text/javascript">
                                $("table#demo2").tableselect({
                                    'onSelecting':function(range){
                                        var limit_count = 2;
                                        var index = Math.ceil(range['from'][0]/limit_count);
                                        if(range['from'][0]<=range['to'][0]){
                                            range['to'][0] = Math.min(range['to'][0],index*limit_count);
                                        }else{
                                            range['to'][0] = Math.max(range['to'][0],index*limit_count-1);
                                        }
                                        return range;
                                    }
                                });
                            </script>
                            <div class="example">
                                <div class="code">
                                    <h1>调用方法：</h1>
                                    <p>$(selector).tableselect(options,callback(api));</p>
                                </div>
                                <div class="table-outer">
                                    <h2>options参数</h2>
                                    <div class="table-inner">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th width="150">参数</th>
                                                    <th width="120">默认值</th>
                                                    <th>说明</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>disabledCls</td>
                                                    <td>'disabled'</td>
                                                    <td>不可选中的class</td>
                                                </tr>
                                                <tr>
                                                    <td>selectedCls</td>
                                                    <td>'selected'</td>
                                                    <td>已选择的class</td>
                                                </tr>
                                                <tr>
                                                    <td>selectingCls</td>
                                                    <td>'selecting'</td>
                                                    <td>正在选择的class</td>
                                                </tr>
                                                <tr>
                                                    <td>direction</td>
                                                    <td>'default'</td>
                                                    <td>选择方向。default:横纵皆可;row:横;col:纵;</td>
                                                </tr>
                                                <tr>
                                                    <td>onSelectStart(range)</td>
                                                    <td>
                                                        function(range){
                                                        }
                                                    </td>
                                                    <td>选中范围前</td>
                                                </tr>
                                                <tr>
                                                    <td>onSelectEnd(range)</td>
                                                    <td>
                                                        function(range){
                                                        }
                                                    </td>
                                                    <td>选中范围后</td>
                                                </tr>
                                                <tr>
                                                    <td>onSelecting(range)</td>
                                                    <td>
                                                        function(range){
                                                        }
                                                    </td>
                                                    <td>移动选择范围时，返回指定范围可限制用户选择</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="table-outer">
                                    <h2>callback(api)参数</h2>
                                    <div class="table-inner">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th width="200">方法</th>
                                                    <th>说明</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>getSelectedCells()</td>
                                                    <td>获取当前已选择单元格</td>
                                                </tr>
                                                <tr>
                                                    <td>getSelectedRange()</td>
                                                    <td>获取当前已选择范围</td>
                                                </tr>
                                                <tr>
                                                    <td>mergeCells(range,callback)</td>
                                                    <td>合并单元格</td>
                                                </tr>
                                                <tr>
                                                    <td>splitCells(range,callback)</td>
                                                    <td>拆分单元格</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <script type="text/javascript" src="https://passer-by.com/static/script/projects.js"></script>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../static/script/common.js"></script>
        <script type="text/javascript" src="../static/script/stat.js"></script>
    </body>
<html>
